@import url('https://fonts.googleapis.com/css2?family=Bona+Nova:ital,wght@0,400;0,700;1,400&family=Exo+2:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap');

.bona-nova {font-family: 'Bona Nova', serif;}
.exo-2 {font-family: 'Exo 2', sans-serif;}


* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}


body {
    font-size: 16px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 400;
}

.header {
    width: 100%;
    height: 120px;
    background-color: #232227;  
}

.hashtag {
    color: #F1D6B1;
    position: absolute;
    right: 220px;
    font-size: 45px;
    top: -6px;
}

.row {
    width: 100%;
    height: auto;
}

.row::after {
    content: '';
    display: block;
    clear: both;
}

.logo {
    width: 30%;
    height: 120px;
    position: inline-block;
    left: 0cm;
}


.img-logo {
    height: 100px;
    margin-top: 10px;
}

.menu {
    width: 100%;
    height: 50px;
    background-color: #242227;
}

.menu-link {
    color:#F2D8B0;
    text-decoration: none;
    font-size: 30px;
    line-height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    display: inlne-lock;
    transition: 1s;
}

.menu-link:hover {
    background-color: #a67c42;
    border-radius: 100px;
    
}

.data {
    position: relative;
    left: 200px;
    top: -7px;
}




.rings_picture {
    position: relative;
    top: 100px;
    left: 245px;
    width: 400px;
    height: 400px;
    transition: 0.6s;

    display: block;
    background-color: #F2D8B0;
    background-image: url(../img/кольца.jpeg);
    background-position: center;
    background-size: cover;
}
.rings_picture  .color {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #F2D8B0;
    opacity: 0;
    transition: 0.5s;
}
.rings_picture:hover {
    transform: scale(1.05);
}
.rings_picture:hover .color {
    opacity: 0.5;
}



.necklaces_picture {
    position: relative;
    top: -300px;
    left: 776px;
    width: 400px;
    height: 400px;
    transition: 0.6s;

    display: block;
    background-color: #F2D8B0;
    background-image: url(../img/золотая\ цепочка.jpg);
    background-position: center;
    background-size: cover;
}
.necklaces_picture .color_2 {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #F2D8B0;
    opacity: 0;
    transition: 0.5s;
}
.necklaces_picture:hover {
    transform: scale(1.05);
}
.necklaces_picture:hover .color_2 {
    opacity: 0.5;
}



.bracelets_picture {
    position: relative;
    top: -700px;
    left: 1305px;
    width: 400px;
    height: 400px;
    transition: 0.6s;

    display: block;
    background-color: #F2D8B0;
    background-image: url(../img/золотой\ браслет.jpg);
    background-position: center;
    background-size: cover;
}
.bracelets_picture .color_3 {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #F2D8B0;
    opacity: 0;
    transition: 0.5s;
}
.bracelets_picture:hover {
    transform: scale(1.05);
}
.bracelets_picture:hover .color_3 {
    opacity: 0.5;
}



.goods {
    position: absolute;
    top: 120px;
}

.sales {
    position: absolute;
    width: 100%;
    top: 655px;
}

.rings_text {
    position: absolute;
    left: 385px;
    color: #c3ad8c;
}

.necklaces_text {
    position: absolute;
    left: 895px;
    color: #c3ad8c;
}

.bracelets_text {
    position: absolute;
    left: 1440px;
    color: #c3ad8c;
}


.sales_1 {
    position: absolute;
    width: 100%;
    top: 655px;
}

.wedding_rings_text {
    position: absolute;
    left: 470px;
    color: #c3ad8c;
}

.silver_rings_text {
    position: absolute;
    left: 1080px;
    color: #c3ad8c;
}

.emerald_necklaces_text {
    position: absolute;
    left: 455px;
    color: #c3ad8c;
}

.necklaces_with_emerald_text {
    position: absolute;
    left: 1050px;
    color: #c3ad8c;
}

.cobra_text {
    position: absolute;
    left: 1110px;
    color: #c3ad8c;
}

.information {
    position: absolute;
    color: #8a7a61;
    top: 380px;
    left: 100px;
}


.any {
    position: absolute;
    top: 120px;
}




.wedding_rings {
    position: relative;
    top: 100px;
    left: 450px;
    width: 400px;
    height: 400px;
    transition: 0.6s;

    display: block;
    background-color: #F2D8B0;
    background-image: url(../img/обручальные\ кольца\ на\ заказ_1.jpg);
    background-position: center;
    background-size: cover;
}
.wedding_rings  .color_4 {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #F2D8B0;
    opacity: 0;
    transition: 0.5s;
}
.wedding_rings:hover {
    transform: scale(1.05);
}
.wedding_rings:hover .color_4 {
    opacity: 0.5;
}



.silver_rings {
    position: relative;
    top: -300px;
    left: 1050px;
    width: 400px;
    height: 400px;
    transition: 0.6s;

    display: block;
    background-color: #F2D8B0;
    background-image: url(../img/серебряные\ кольца.jpg);
    background-position: center;
    background-size: cover;
}
.silver_rings .color_6 {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #F2D8B0;
    opacity: 0;
    transition: 0.5s;
}
.silver_rings:hover {
    transform: scale(1.05);
}
.silver_rings:hover .color_6 {
    opacity: 0.5;
}

.example_of_wedding_rings {
    width: 35%;
    height: 35%;
    position: relative;
    left: 360px;
    top: 40px;
}

.Size_size {
    width: 80px;
    height: 65px;
    font-size: 125%;
    background-color: #F2D8B0;
    border: 3px solid black;
}

.description_of_wedding_rings {
    position: absolute;
    top: 150px;
    right: 540px
}

.name_of_wedding_rings {
    font-size: 175%;
    color: #242227;
}

.description_of_silver_rings {
    position: absolute;
    top: 150px;
    right: 540px
}

.name_of_silver_rings {
    font-size: 175%;
    color: #242227;   
}

.example_of_silver_rings {
    width: 35%;
    height: 35%;
    position: relative;;
    left: 360px;
    top: 40px;    
}




.emerald_necklaces {
    position: relative;
    top: 100px;
    left: 450px;
    width: 400px;
    height: 400px;
    transition: 0.6s;

    display: block;
    background-color: #F2D8B0;
    background-image: url(../img/изумрудное\ ожерелье.jpg);
    background-position: center;
    background-size: cover;
}
.emerald_necklaces  .color_5 {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #F2D8B0;
    opacity: 0;
    transition: 0.5s;
}
.emerald_necklaces:hover {
    transform: scale(1.05);
}
.emerald_necklaces:hover .color_5 {
    opacity: 0.5;
}




.necklaces_with_emerald {
    position: relative;
    top: -300px;
    left: 1050px;
    width: 400px;
    height: 400px;
    transition: 0.6s;

    display: block;
    background-color: #F2D8B0;
    background-image: url(../img/ожерелье\ с\ изумрудом.jpg);
    background-position: center;
    background-size: cover;
}
.necklaces_with_emerald .color_7 {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #F2D8B0;
    opacity: 0;
    transition: 0.5s;
}
.necklaces_with_emerald:hover {
    transform: scale(1.05);
}
.necklaces_with_emerald:hover .color_7 {
    opacity: 0.5;
}



.bracelet_with_emerald {
    position: relative;
    top: 100px;
    left: 450px;
    width: 400px;
    height: 400px;
    transition: 0.6s;

    display: block;
    background-color: #F2D8B0;
    background-image: url(../img/браслет\ с\ изумрудами.jpg);
    background-position: center;
    background-size: cover;
}
.bracelet_with_emerald  .color_8 {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #F2D8B0;
    opacity: 0;
    transition: 0.5s;
}
.bracelet_with_emerald:hover {
    transform: scale(1.05);
}
.bracelet_with_emerald:hover .color_8 {
    opacity: 0.5;
}


.cobra {
    position: relative;
    top: -300px;
    left: 1050px;
    width: 400px;
    height: 400px;
    transition: 0.6s;

    display: block;
    background-color: #F2D8B0;
    background-image: url(../img/браслет\ кобра.jpg);
    background-position: center;
    background-size: cover;
}
.cobra .color_9 {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #F2D8B0;
    opacity: 0;
    transition: 0.5s;
}
.cobra:hover {
    transform: scale(1.05);
}
.cobra:hover .color_9 {
    opacity: 0.5;
}

.new {
    position: fixed;
    top: 225px;
    left: 250px;
    font-size: 20px;
    color: #854b4b;
}

.phone {
    position: fixed;
    left: 500px;
    top: 225px;
}